<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            margin: 10px;
        }
        ul li {
            list-style: none;
            float: left;
            margin-left: 10px;
        }
    </style>
    
</head>
<body>

    <div class="max">
        <ul>
            <li>
                <img src="https://img.alicdn.com/bao/uploaded/i1/577917049/TB2czDGa0LO8KJjSZFxXXaGEVXa_!!577917049.jpg_200x200q90.jpg_.webp">
                <p>
                    <span>109元</span>
                </p>
            </li>
            <li>
                <img src="https://img.alicdn.com/bao/uploaded/i1/577917049/TB2czDGa0LO8KJjSZFxXXaGEVXa_!!577917049.jpg_200x200q90.jpg_.webp">
                <p>
                    <span>99元</span>
                </p>
            </li>
            <li>
                <img src="https://img.alicdn.com/bao/uploaded/i1/577917049/TB2czDGa0LO8KJjSZFxXXaGEVXa_!!577917049.jpg_200x200q90.jpg_.webp">
                <p>
                    <span>129元</span>
                </p>
            </li>
            <li>
                <img src="https://img.alicdn.com/bao/uploaded/i1/577917049/TB2czDGa0LO8KJjSZFxXXaGEVXa_!!577917049.jpg_200x200q90.jpg_.webp">
                <p>
                    <span>89元</span>
                </p>
            </li>
            <li>
                <img src="https://img.alicdn.com/bao/uploaded/i1/577917049/TB2czDGa0LO8KJjSZFxXXaGEVXa_!!577917049.jpg_200x200q90.jpg_.webp">
                <p>
                    <span>999.80元</span>
                </p>
            </li>
            <li>
                <img src="https://img.alicdn.com/bao/uploaded/i1/577917049/TB2czDGa0LO8KJjSZFxXXaGEVXa_!!577917049.jpg_200x200q90.jpg_.webp">
                <p>
                    <span>19元</span>
                </p>
            </li>
            <li>
                <img src="https://img.alicdn.com/bao/uploaded/i1/577917049/TB2czDGa0LO8KJjSZFxXXaGEVXa_!!577917049.jpg_200x200q90.jpg_.webp">
                <p>
                    <span>99.9元</span>
                </p>
            </li>
        </ul>
    </div>
    <button>从大到小排列</button>
    <button>从小到大排列</button>
    <button>随机排列</button>
    
<script>
    var oul = document.getElementsByTagName('ul')[0]
    var oli = document.getElementsByTagName('li')
    var btn = document.getElementsByTagName('button')

    var arr = []
    // 把oli这个类数组变成真正的数组
    for(var i=0;i<oli.length;i++) {
        arr.push(oli[i])
    }

    btn[0].onclick = function(){
       arr.sort(function(a,b){
        var price1 = parseFloat(a.getElementsByTagName('span')[0].innerHTML)
        var price2 = parseFloat(b.getElementsByTagName('span')[0].innerHTML)
        return price1 - price2
       })

       var str=''
       for(var i=0;i<arr.length;i++) {
            // 获取图片路径
            var imas = arr[i].getElementsByTagName('img')[0].src
            var spans = arr[i].getElementsByTagName('span')[0].innerHTML
            str += `
            <li>
                <img src="${imas}">
                <p>
                    <span>${spans}</span>
                </p>
            </li>
            `
            oul.innerHTML=str
       }
    }
    btn[1].onclick = function(){
        arr.sort(function(a,b){
            var price1 = parseFloat(a.getElementsByTagName('span')[0].innerHTML)
            var price2 = parseFloat(b.getElementsByTagName('span')[0].innerHTML)
            return price2 - price1
        })
        var str = ''
        for(var i=0;i<arr.length;i++) {
            var imas = arr[i].getElementsByTagName('img')[0].src
            var spans = arr[i].getElementsByTagName('span')[0].innerHTML
            str+= `
            <li>
                <img src="${imas}">
                <p>
                    <span>${spans}</span>
                </p>
            </li>
            `
        }
        oul.innerHTML = str
    }
    btn[2].onclick = function(){
        arr.sort(function(a,b){
            return  0.5-Math.random()
        })
        var str=''
        for(var i=0;i<arr.length;i++) {
            var imas = arr[i].getElementsByTagName("img")[0].src
            var spans = arr[i].getElementsByTagName("span")[0].innerHTML
            str+=`
            <li>

                <img src="${imas}" />
                <p>
                    <span>${spans}</span>
                </p>
            </li>`
        }
        oul.innerHTML=str
    }
</script>


    <script>
        var c = console.log.bind(document)
    </script>
    <!-- //将类数组转换为真正的数组
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul> -->
    <script>
        // var oul = document.getElementsByTagName('ul')
        // var oli = oul[0].getElementsByTagName('li')

        // 类数组不是数组不能使用数组方法
        // c(oli.join())
        // 报错:oli.join is not a function

        // var arr = []
        // for(var i=0;i<oli.length;i++) {
        //     arr.push(oli[i])
        // }
        // c(arr)  // [li, li, li, li, li]
        // c(arr.join())   // [object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement]
  

    // 把字符串转换成数组
        // var str = 'asdadadasf'
        // var arr = []
        // for(var i=0;i<str.length;i++){
        //     arr.push(str[i])
        // }
        // c(arr)      // ['a', 's', 'd', 'a', 'd', 'a', 'd', 'a', 's', 'f']

    // //数组去除重复
    //     var news = ['a','b','c','b','d','c']
    //     var arr =[]

    //     for(var i=0;i<news.length;i++){
    //         // 判断arr 中有没有 news[i] 没有就是 -1
    //         if(arr.indexOf(news[i]) == -1) {
    //             // 没有就从后面添加
    //             arr.push(news[i])   //  ['a', 'b', 'c', 'd']
    //         }
    //     }
    //     c(arr)

    // // 删除字符串中的所有内容
    // var news = ['a','b','c','b','d','c']
    // var arr = news.length
    // for(var i=0;i<news.length;i++){
    //     news.pop(news[i])
    // }
    // // 因为字符串被删除 字符串的长度会发生变化
    // // 所以删除不完整
    // c(news) //  ['a', 'b', 'c']

    // // 加个 变量 固定字符串长度就可以
    // var news = ['a','b','c','b','d','c']
    // var arr = news.length
    // for(var i=0;i<arr;i++){
    //     news.pop(news[i])
    // }
    // c(news) // []

    // splice方法
    // 格式： arr.splice(开始下标(必须),删除的个数,新增项目)
    // 作用:  修改数组
    
    // var arr = [1,2,3,4,5,6,7,7]
    // c(arr.splice(0))         // [1,2,3,4,5,6,7,7]
    // c(arr.splice(1,5))          // [2, 3, 4, 5, 6]
    // c(arr.splice(0,2,4))     // [1, 2]
    // c(arr.splice(0,2,1))     //  
    // c(arr.splice(0,2,1))     // 
    // c(arr.splice(0,2,1))     // 

    // 翻转数组
    // reverse
    // 格式: arr.reverse()
    // 作用: 将数组中的数据翻转过来
    // var arr = [1,2,3,4,5,6,6]
    // c(arr.reverse())    // [6, 6, 5, 4, 3, 2, 1]

    // 合并数组
    // var arr =[]
    // var arr1 = [1,2,3,4]
    // var arr2 = [2,3,4,5,5]
    // var arr3 = [6]
    // c(arr.concat(arr1,arr2,arr3))  // [1, 2, 3, 4, 2, 3, 4, 5, 5, 6]
    


    // 分数或首字母排序
    // var arr = [
    //     { name: "武丽昕", num: 78 },
    //     { name: "汤文博", num: 38 },
    //     { name: "卢文博", num: 58 },
    //     { name: "邓钧键", num: 97 },
    //     { name: "刘继昂", num: 56 },
    //     { name: "栗军安", num: 78 },
    //     { name: "屈晓月", num: 98 },
    //     { name: "付秋萍", num: 79 }
    // ]
    // // 按分数来排列
    // arr.sort(function(a,b) {
    //     c(b.num,a.num)
    //     return b.num-a.num
    // })
    // c(arr)  
    // 0: {name: '屈晓月', num: 98}
    // 1: {name: '邓钧键', num: 97}
    // 2: {name: '付秋萍', num: 79}
    // 3: {name: '武丽昕', num: 78}
    // 4: {name: '栗军安', num: 78}
    // 5: {name: '卢文博', num: 58}
    // 6: {name: '刘继昂', num: 56}
    // 7: {name: '汤文博', num: 38}

    // arr.sort(function (a,b) {
    //     c(a.name,b.name, a.name.localeCompare(b.name))
    //     return a.name.localeCompare(b.name)
    // })
    // console.log(arr)


    // 时间或DIU转换
    
    // var arr = [
    //     {"date":"2018-08-01", "DIU": 1209, "country": "US"},
    //     {"date":"2018-08-02", "DIU": 680, "country": "GB"},
    //     {"date":"2018-08-01", "DIU": 2311, "country": "CN"},
    //     {"date":"2018-08-02", "DIU": 879, "country": "US"},
    //     {"date":"2018-08-03", "DIU": 1525, "country": "CN"},
    //     {"date":"2018-08-02", "DIU": 1525, "country": "CN"}
    // ];

    // arr.sort(function (a,b) {
    //     c(Date.parse(a.date),Date.parse(b.date))
    //     //如果时间相同通过DIU来对比
    //     if (a.date==b.date){
    //         return a.DIU-b.DIU
    //     }
    //     //将时间转换为时间戳来对比
    //     return Date.parse(a.date)-Date.parse(b.date)
    // })
    // console.log(arr)


    //随机排序  结果要么为正值  正值换位置   如果为负值 就不换位置
    
    // var arr = [1,2,3,4,5,6]

    //洗牌算法(随机排序)

    //换不换位置取决去  return 出来的是正值还是负值
    // arr.sort(function(){
    //     var str =  0.5-Math.random()
    //     c(str)
    //     return  str
    // }) 

    // console.log(arr);
</script>


 



</body>
</html>